<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>zcoder</title>
<meta name="keywords" content="关键词" />
<meta name="description" content="描述" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%@ include file="/tools/style.jsp"%>
</head>
<body>
<%@ include file="/tools/nav.jsp"%>
<div class="container">
<br>
<script type="text/javascript">
$(function() {
	$("#mkqrcode").click(function() {
		text =$.trim( $("#str").val());
		qrcode_w =parseInt( $("#qrcode_w").val()) > 0 ? parseInt( $("#qrcode_w").val()) : 64;
		qrcode_h =parseInt( $("#qrcode_h").val()) > 0 ? parseInt( $("#qrcode_h").val()) : 64;
		console.log(qrcode_w);
		console.log(qrcode_h);
		jQuery('#qrcodeCanvas').empty();
		jQuery('#qrcodeCanvas').qrcode({
		  width: qrcode_w,
		  height: qrcode_h,


		  text	: text
		});
	});
	$("#qrcode_h").keyup(function() {
		$("#qrcode_w").val($(this).val());
	})
	$('#download').click(function() {
		this.href = $('canvas')[0].toDataURL();// Change here
		this.download = 'qrcode.png';
	});

	$("#mkqrcode").click();
})
</script>

<div class="row">

	<div class="col-md-12">
		
				<div class="panel panel-default">
			<div class="panel-heading">
			<div class="media">
			<div class="media-body">
			<h4 class="media-heading">在线二维码生成器</h4>
			
			</div>
			</div>
			</div>
			<div class="panel-body">
				<div class="input-group">
				<span class="input-group-addon" id="basic-addon1">网页地址</span>
				<input type="text" class="form-control" id="str" placeholder="http://www.runoob.com" value="http://www.runoob.com" aria-describedby="basic-addon1">
				</div>
				<div class="input-group" style="margin-top: 20px;">
					<span class="input-group-addon" id="basic-addon1">高度</span>
					<input type="text" class="form-control" id="qrcode_h" placeholder="二维码高度" value="128" aria-describedby="basic-addon1">
					<span class="input-group-addon" id="basic-addon1">宽度</span>
					<input type="text" class="form-control" id="qrcode_w" placeholder="二维码宽度" value="128" aria-describedby="basic-addon1">
				</div>
				<div class="btn-group" role="group" aria-label="..." style="margin-top: 20px;">
				<button type="button" class="btn btn-success" id="mkqrcode">生成二维码</button>
				<a class="btn btn-default" id="download">下载二维码</a>
				</div>
				<div id="qrcodeCanvas" style="text-align:center;margin: 30px;"></div>
			</div>
			
			<div class="panel-footer"></div>
			</div>
		

	</div>
</div>
</div>
</body>
</html>